<template>
  <div>
    <!-- 头部区域 -->
    <MainInHeadVue>
      <template #left>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="设备编号：">
            <el-input v-model.trim="formInline.region" placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSearch(formInline.region)">
              <i class="el-icon-zoom-in" />
              查询
            </el-button>
            <el-button type="primary" @click="onReset">
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </template>
    </MainInHeadVue>
    <!-- 内容区域 -->
    <MainInConterVue>
      <template #conter>
        <!-- 新建按钮 -->
        <el-button @click="addInfo"> <i class="el-icon-plus" /> 新建 </el-button>
        <el-button @click="DiscountFn"> 批量操作</el-button>
        <el-table
          ref="multipleTable"
          :data="pageInfo"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" width="120" />
          <el-table-column prop="innerCode" label="设备编号" />
          <el-table-column prop="type.name" label="设备型号" />
          <el-table-column prop="node.name" label="详细地址" />
          <el-table-column prop="ownerName" label="合作商" />
          <el-table-column prop="index" label="设备状态">
            <template #default="scope">
              <el-link :underline="false" type="primary" @click="setCargoAisleFn(scope.row)">货道</el-link>
              <el-link :underline="false" type="primary">策略</el-link>
              <el-link :underline="false" type="primary">修改</el-link>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          style="margin-top: 20px;"
          background
          layout="prev, pager, next"
          :total="+pageNum.totalCount"
          hide-on-single-page
          @current-change="putPageCount"
        />
      </template>
    </MainInConterVue>
    <!-- 新建弹出框 -->
    <el-dialog
      title="新增设备"
      :visible.sync="addUserInfo"
      width="40%"
    >
      <el-form ref="form" :model="addUserFrom" label-width="100px">
        <el-form-item label="选择型号：">
          <div>系统自动生成 </div>
        </el-form-item>
        <el-form-item label="选择型号：">
          <el-select v-model="addUserFrom.vmType" style="width: 100%;" placeholder="请选择">
            <el-option
              v-for="item in SalesDetail.currentPageRecords"
              :key="item.id"
              :label="item.name"
              :value="item.typeId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位：">
          <el-select v-model="addUserFrom.nodeId" style="width: 100%;" placeholder="请选择">
            <el-option
              v-for="item in pointInfo.currentPageRecords"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addUserInfo = false">取 消</el-button>
        <el-button type="primary" @click="submitAddInfo">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 批量修改折扣信息弹出框 -->
    <el-dialog
      title="修改折扣信息"
      :visible.sync="DiscountInfoisShow"
      width="40%"
    >
      <span style="line-height: 60px;"> 选择策略：</span>
      <el-select v-model="okDiscount" style="width: 100%;" placeholder="请选择">
        <el-option
          v-for="item in DiscountInfo"
          :key="item.policyId"
          :label="item.policyName"
          :value="item.policyId"
        />
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="DiscountInfoisShow = false">取 消</el-button>
        <el-button type="primary" @click="putDiscountInfoFn">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 货道设置弹层 -->
    <el-dialog
      title="货道设置"
      :visible.sync="setCargoAisleIsShow"
      width="940px"
    >
      <!-- 头部信息 -->
      <el-row style="line-height: 60px;">
        <el-col :span="4">货道行数：{{ cargoAisleRowAndCall.vmRow }}</el-col>
        <el-col :span="4">货道列数：{{ cargoAisleRowAndCall.vmCol }}</el-col>
        <el-col :span="13">货道容量（个）：{{ cargoAisleRowAndCall.channelMaxCapacity }}</el-col>
        <el-col :span="3">
          <el-button>智能排货</el-button>
        </el-col>
      </el-row>
      <!-- 卡片内容区域 -->
      <div style="display: flex;">
        <div style="width: 40px; font-size: 30px; line-height: 425px;">
          <i v-if="arrowheadIsSHow" style="color: #000; " class="el-icon-caret-left" @click="leftMoveFn" />
        </div>
        <div class="callConent" style="flex: 1;">
          <div class="scllowConent">
            <el-row v-for="item in VendingMachineInfo" :key="item.row" :gutter="10" type="flex">
              <div
                v-for="obj in item.children"
                :key="obj.channelId"
                style="width: 150px; height: 180px;  margin:10px 0 0 10px ;"
              >
                <div class="imgCol">
                  <div style="text-align: center; color: #fff; line-height: 20px; width: 35px; float: left; margin-top: 10px; background-color: #879ae7; border-radius: 0 5px 5px 0;">{{ obj.channelCode }}</div>
                  <img
                    style="width: 80px; margin-top: 20px;"
                    :src="obj.sku?obj.sku.skuImage:''"
                  >
                  <p style="text-align: center; margin-top: 5px;">{{ obj.sku?obj.sku.skuName:'暂无商品' }}</p>
                </div>
                <p style="line-height: 5px; text-align: center;">
                  <el-link type="primary">添加</el-link>
                  <el-link type="danger">删除</el-link>
                </p>
              </div>
            </el-row>
          </div>
        </div>
        <div style="width: 40px; font-size: 30px; line-height: 425px;">
          <i v-if="arrowheadIsSHow" style="color: #000;" class="el-icon-caret-right" @click="rightMoveFn" />
        </div>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import { disposeArrFn } from '@/utils/disposeArr'
import MainInConterVue from '@/components/SvgIcon/MainConter/MainInConter.vue'
import MainInHeadVue from '@/components/SvgIcon/MainConter/MainInHead.vue'
// 获取售货机信息，搜索售货机信息,获取售货机类型,获取点位信息,提交新建售货机信息,获取折扣信息,修改折扣信息,获取货到设置信息,获取售货机详情
import { salesInfo, searchSalesInfo, getSalesDetail, getPointInformation, addVendingMachineInfo, getDiscountInfo, putDiscountInfo, getCargoAisleInfo, getVendingMachineInfo } from '@/api'
export default {
  components: {
    MainInConterVue,
    MainInHeadVue
  },
  data() {
    return {
      arrowheadIsSHow: false,
      // 保存售货机信息
      VendingMachineInfo: [],
      // 保存货道行列数
      cargoAisleRowAndCall: {},
      // 设置货到弹窗
      setCargoAisleIsShow: false,
      // 折扣信息弹出框
      DiscountInfoisShow: false,
      // 确认的折扣信息
      okDiscount: '',
      // 保存获取的折扣信息
      DiscountInfo: [],
      // 保存新建售货机信息
      addUserFrom: {
        vmType: '', // 售货机id
        nodeId: '', // 所属点位id
        createUserId: 1// 创建人id
      },
      // 新建弹出框弹出
      addUserInfo: false,
      // 储存点位信息
      pointInfo: {},
      // 储存售货机详情
      SalesDetail: {},
      // 保存点击复选框为true的数据
      multipleSelection: [],
      // 保存页码数据
      pageNum: {},
      // 保存页面数据
      pageInfo: [],
      // 初始获取搜索信息列表
      params: {
        pageIndex: 1,
        pageSize: 10
      },
      // 绑定搜素表单
      formInline: {
        region: ''
      }
    }
  },
  created() {
    this.getPageInfo()
  },
  methods: {
    // 点击左侧按钮向左滑动
    rightMoveFn() {
      const lArrowhead = document.querySelector('.el-icon-caret-left')
      const rArrowhead = document.querySelector('.el-icon-caret-right')
      const leftMove = document.querySelector('.scllowConent')
      leftMove.style.transform = 'translateX(-50%)'
      rArrowhead.style.color = '#f6f7fb'
      lArrowhead.style.color = '#000'
    },
    leftMoveFn() {
      const lArrowhead = document.querySelector('.el-icon-caret-left')
      const rArrowhead = document.querySelector('.el-icon-caret-right')
      const leftMove = document.querySelector('.scllowConent')
      leftMove.style.transform = 'translateX(0)'
      rArrowhead.style.color = '#000'
      lArrowhead.style.color = '#f6f7fb'
    },

    // 设置货道
    async setCargoAisleFn(val) {
      this.setCargoAisleIsShow = true
      const res = await getCargoAisleInfo(val.type.typeId)
      const res1 = await getVendingMachineInfo(val.innerCode)
      this.cargoAisleRowAndCall = res
      this.VendingMachineInfo = disposeArrFn(res1)
      console.log(this.VendingMachineInfo)
      if (this.VendingMachineInfo[0].children.length > 5) {
        this.arrowheadIsSHow = true
      } else {
        this.arrowheadIsSHow = false
      }
      const leftMove = document.querySelector('.scllowConent')
      if (leftMove.style.transform === 'translateX(50%)') {
        this.rightMoveFn()
      } else {
        this.leftMoveFn()
      }
    },
    // 修改折扣信息
    async putDiscountInfoFn() {
      await putDiscountInfo(
        {
          innerCodeList: this.multipleSelection,
          policyId: this.okDiscount
        }
      )
      this.$message.success('修改折扣信息成功')
      this.DiscountInfoisShow = false
    },
    // 获取折扣信息
    async DiscountFn() {
      if (!this.multipleSelection.length) {
        this.$message.error('请勾选要修改的商品')
        return
      }
      const res = await getDiscountInfo()
      this.DiscountInfo = res
      this.DiscountInfoisShow = true
    },
    // 当前页数发生改变
    putPageCount(val) {
      this.params.pageIndex = val
      this.getPageInfo()
    },
    // 提交新建信息
    async submitAddInfo() {
      console.log(this.addUserFrom)
      await addVendingMachineInfo(this.addUserFrom)
      this.$message.success('新建售货机信息成功')
      this.addUserInfo = false
      this.getPageInfo()
    },
    // 添加新建按钮
    async addInfo() {
      // 售货机信息
      const res = await getSalesDetail({
        pageIndex: 1,
        pageSize: 100000
      })
      // 点位信息
      const res1 = await getPointInformation({
        pageIndex: 1,
        pageSize: 100000
      })
      this.SalesDetail = res
      this.pointInfo = res1
      // console.log(this.SalesDetail)
      // console.log(this.pointInfo)
      this.addUserInfo = true
    },
    // 点击复选框之后的回调，会讲当前项传入到multipleSelection中
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => this.multipleSelection.push(item.innerCode))
      // console.log(this.multipleSelection)
    },
    // 获取页面默认信息
    async getPageInfo() {
      const res = await salesInfo(this.params)
      // 页面渲染信息
      this.pageInfo = res.currentPageRecords
      // 页码信息
      this.pageNum = res
      // console.log(this.pageInfo)
      // console.log(this.pageNum)
    },
    // 点击搜索查询数据
    async onSearch(id) {
      const res = await searchSalesInfo({
        pageIndex: 1,
        pageSize: 10,
        innerCode: id
      })
      // console.log(res)
      this.pageInfo = res.currentPageRecords
      // 页码信息
      this.pageNum = res
    },
    // 点击重置信息
    onReset() {
      this.getPageInfo()
    }
  }
}
</script>

<style scoped lang="scss">

.el-form{
  margin-top: -5px;
}
.el-button{
  background-color: #8e76a2;
  border: 1px solid #fff;
  color: #fff;
  margin-bottom: 20px;
}
.el-link{
  margin-right: 10px;
  color:#8e76a2 ;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active{
  color: #fff;
  background-color: #8e76a2;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 500px;
    height: 500px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
     background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
     background-color: #d3dce6;
  }
  .cardConter{
    display: flex;
    width:180%;
    height: 500px;
    overflow: scroll;
    flex-wrap: wrap;
    justify-content: space-around;
    text-align: center;
  }
  .imgcardConter{
    width: 150px;
    height: 135px;
    background-color: #f6f7fb;
  }
  .TextCardConter{
    line-height: 45px;
  }
  .cardImg{
    width: 80px;
    margin-top:25px;
  }
  .titleText{
    float: left;
    margin-top:20px ;
    background-color: #879ae7;
    width: 43px;
    height: 23px;
    color: #fff;
    line-height: 23px;
    border-radius: 0 5px 5px 0;
  }
  .el-col{
  margin-bottom: 10px;
  }
  .row-bg {
    padding: 10px 0;
  }
  .callConent{
    width: 100%;
    height: 500px;
    overflow-x:hidden;
    overflow-y:scroll;
  }
  // .callConent::-webkit-scrollbar{
  //   display: none;
  // }
  .callConent::-webkit-scrollbar{
    display: block;
    width: 6px;
    background-color: #fff;
  }
  .callConent::-webkit-scrollbar-thumb{
    background-color: #d0d0d0;
    border-radius: 5px;
  }
  .scllowConent{
    width: 200%;
    height: 100%;
    padding: 10px;
    transition: all .5s;
  }
  .imgCol{
    height: 135px;
    background-color: #f6f7fb;
  }

</style>
